<template>
	<view class="contain">
		<view class="uni-padding-wrap navTab">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-show="current === 0">
				<view class="comment-items" v-for="(item, index) in datas" :key="index" @longpress="toDel(item,index)">
					<view class="left"><image :src="item.headImg" mode="aspectFill" /></view>
					<view class="right">
						<view class="top row_between">
							<view class="title">{{item.title}}</view>
							<view class="time">{{item.time}}</view>
						</view>
						<view class="center">
							{{item.content}}
						</view>
						<view class="buttom row">
							<image src="../../static/img/lianjie.png" mode="aspectFill"></image>
							<view class="text">
								{{item.hrfname}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="current === 1">
				<view class="comment-items" v-for="(item, index) in datas2" :key="index">
					<view class="left"><image :src="item.headImg" mode="aspectFill" /></view>
					<view class="right">
						<view class="top row_between">
							<view class="title" style="font-size: 26upx;color: #999999;font-weight: 500;">{{item.title}}</view>
							<view class="time">{{item.time}}</view>
						</view>
						<view class="center">
							{{item.content}}
						</view>
						<view class="buttom row">
							<image src="../../static/img/lianjie.png" mode="aspectFill"></image>
							<view class="text">
								{{item.hrfname}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部弹窗 -->
		<uni-popup ref="popup" :type="type" @change="change">
			<view class="delete" @tap="del">
				删除
			</view>
			<view class="middle">
				
			</view>
			<view class="cancel" @tap="cancel">
				取消
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
	components: {
		uniSegmentedControl,
		uniPopup
	},
	data() {
		return {
			items: ['我发出的', '回复我的'],
			current: 0,
			activeColor: '#333333',
			styleType: 'text',
			datas: [
				{ id: '1', headImg: '/static/img/login_head.png', title: '趣读君', time: '刚刚', content: '这篇文章写的很棒！',hrf:'www.baidu.com',hrfname:'原文：小赢网金2018财报的有专家的消息…' },
				{ id: '2', headImg: '/static/img/login_head.png', title: '我', time: '2019-10-09', content: '回复 用户23455：这篇文章写得很棒看了之后觉得很有收获',hrf:'www.baidu.com',hrfname:'原文：小赢网金2018财报的有专家的消息…' },
			],
			datas2: [
				{ id: '1', headImg: '/static/img/login_head.png', title: '用户1231回复我：', time: '刚刚', content: '这篇文章写的很棒！',hrf:'www.baidu.com',hrfname:'原文：小赢网金2018财报的有专家的消息…' },
				{ id: '2', headImg: '/static/img/login_head.png', title: '用户1231回复我：', time: '2019-10-09', content: '这篇文章写的很棒！',hrf:'www.baidu.com',hrfname:'原文：小赢网金2018财报的有专家的消息…' },
			],
			type: 'bottom',
			open: 'popup',
			tempDelData:''
		};
	},
	methods: {
		onClickItem(index) {
			if (this.current !== index) {
				this.current = index;
			}
		},
		toDel(item,index){
			this.tempDelData=index;
			this.$refs[this.open].open();
		},
		cancel(){
			this.$refs[this.open].close()
		},
		del(){
			// let id=this.tempDelData;
			// for(let i=0;i<this.datas.length;i++){
			// 	if(this.datas[i].id=id){
			// 		this.datas.splice(i,1);
			// 		break;
			// 	}
			// }
			this.datas.splice(this.tempDelData,1);
			this.cancel();
		},
		change(e) {
			console.log(e.show)
		}
	},
	onUnload(){
		this.tempDelData='';
	}
};
</script>

<style lang="scss">
.content {
	padding: 0 30upx;
	.comment-items {
		display: flex;
		flex-direction: row;
		width: 692upx;
		height: 240upx;
		.left image {
			width: 100upx;
			height: 100upx;
			align-self: flex-start;
		}
		.right{
			flex: 1;
			justify-content: space-between;
			margin-left: 15upx;
			.top{
				.title{line-height: 60upx;font-size: 30upx;color: #2E2D2D;font-weight: bold;}
				.time{line-height: 60upx;font-size: 24upx;color: #999999;font-weight: 500;}
			}
			.center{font-size: 32upx;font-weight: 500;line-height: 40upx;}
			.buttom{
				margin-top: 20upx;
				width: 100%;
				background:rgba(245,245,245,1);
				border-radius:10upx;
				height: 84upx;
				image{
					width: 30upx;
					height: 30upx;
					margin: 0 13upx 0 30upx;
				}
				.text{
					font-size: 24upx;
					font-weight: 500;
					color: #666666;
				}
			}
		}
	}
}
.delete{
	text-align: center;
	height: 100upx;
	line-height: 100upx;
	color: #FE4444;
	font-size: 32upx;
	font-weight: bold;
}
.middle{
	width: 100%;
	height: 20upx;
	background: #F5F5F5;
}
.cancel{
	text-align: center;
	height: 100upx;
	line-height: 100upx;
	font-size: 32upx;
	font-weight: 500;
}
</style>
